<app-header></app-header>

<div class="container-fluid" class="h-100">
  <div class="row mb-3 mt-3">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div class="shadow mx-3 p-5 bg-white" style="border-radius: 20px;">
        <div class="row">
          <div class="col-lg-6">
            <div style="font-size: 36px;">Configuration</div>
            <div style="font-size: 18px;" class="pt-5 pr-5">
              You can choose if you want to use the 16khz model or the 44.1khz model.
            </div>
          </div>
          <div class="col-lg-6 py-5">
            <div class="py-1 text-left">
              <label class="text-secondary px-2"> Model Type: </label>
              <label class="text-secondary px-2" for="model_type_44k"> 44kHz </label>
              <input [(ngModel)]="model_type" value="44k" type="radio" name="model_type" class="mr-1 heading-3 text-right" style="width: 48px;" id="model_type_44k">
              <label class="text-secondary px-2" for="model_type_16k"> 16kHz </label>
              <input [(ngModel)]="model_type" value="16k" type="radio" name="model_type" class="mr-1 heading-3 text-right" style="width: 48px;" id="model_type_16k">
              <!-- <input type="text" [(ngModel)]="projectName" style="width:70%; border: none; position: relative; top: 0; left: -75px; font-size: 20px;"> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row py-5 my-5">
    <!-- <div class="col-md-3"></div> -->
    <div class="col-md-3"></div>
    <div class="col-md-6">
    <!-- <div class="col-md-6"> -->
      <div class="shadow mx-3 p-5 pb-1 bg-white" style="border-radius: 20px;">
        <div class="row">
          <div class="col-lg-6">
            <div style="font-size: 36px;">Upload<br>Audio</div>
          </div>
          <div class="col-lg-6 pt-5">
            <div class="row py-1 pt-5 text-center">
              <!-- <div class="col-4 border-right"><span style="float:left; padding-top:8px" class="pr-2">Upload</span></div> -->
              <div class="col">
                <input type="file" class="file-input" (change)="onFileSelected($event)" accept=".wav,.mp3,.aac,.ogg,.flac,.alac,.aiff,.dsd,.pcm,.MP4,.MOV,.WMV,.AVI,.AVCHD,.FLV,.F4V,.SWF,.MKV,.WEBM" #fileUpload>
                <span class="file-upload" style="font-size: 18px; float:right">
                  <span class="pr-2">{{fileName ? "Change Audio" : "Upload Audio"}}</span>
                  <img src="/WaterMarkingWebsite/assets/images/upload.png" (click)="fileUpload.click()" class="upload-img">
                </span>
              </div>
            </div>
            <div class="text-right pt-3"><button class="btn btn-primary" (click)="submit()">Decode Message</button></div>
          </div>
        </div>
        <div class="row" *ngIf="message">
          <div class="col-md-3"></div>
          <div class="col-md-6 py-5">
            <div class="py-1 text-left">
              <div class="custom-form-group">
                <label class="text-secondary px-2"> Message </label>
                <span *ngFor="let _ of gen_len(model_options[project.selected].message_len); let i = index;">
                  <input [(ngModel)]="message[i]" class="mr-1 heading-3 text-right" style="width: 48px;" disabled>
                </span>
                <!-- <input type="text" [(ngModel)]="projectName" style="width:70%; border: none; position: relative; top: 0; left: -75px; font-size: 20px;"> -->
              </div>
            </div>
            <div class="py-1 text-center">
              Confidence: {{confidence}} 
            </div>
            <div class="pt-1 text-center" *ngIf="confidence<0.2">The confidence is quite low. There is probably no message embedded in the waveform</div>
          </div>
        </div>
        <div *ngIf="no_message_detected" style="font-size: 24px;" class="text-center">There is no message present in the audio file</div>
      </div>
      <!-- <div class="shadow-lg mx-3 p-3">
        <div class="row py-1 border-bottom">
          <div class="col-3 border-right"><span style="float:left; height: 40px; padding-top:8px" class="pr-2">Upload</span></div>
          <div class="col-9">
            <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>
            <span class="file-upload" style="float:right">
              {{fileName || "No file uploaded yet."}}
              <img src="/WaterMarkingWebsite/assets/images/upload.png" (click)="fileUpload.click()" class="upload-img">
            </span>
          </div>
        </div>
        <div class="text-center pt-3"><button class="btn btn-primary" (click)="submit()">Decode Message</button></div>
      </div> -->
    <!-- </div> -->
    </div>
  </div>
</div>
  
  
